<template>
  <div class="app-container">
    <div style="font-size: 16px; margin-bottom: 10px">录音管理</div>
    <div style="margin-bottom: 20px">
      <el-date-picker
        v-model="queryParams.date"
        type="datetimerange"
        range-separator="To"
        start-placeholder="呼叫开始时间"
        end-placeholder="呼叫结束时间"
      />
      <el-input
        v-model="queryParams.roleKey"
        placeholder="请输入电话号码/通话时长查询"
        :prefix-icon="Search"
        clearable
        style="width: 240px; margin: 0 10px"
        @keyup.enter="handleQuery"
      />
      <el-select
        v-model="queryParams.status"
        placeholder="请选择呼叫类型"
        clearable
        style="width: 200px"
      >
        <el-option
          v-for="dict in sys_normal_disable"
          :key="dict.value"
          :label="dict.label"
          :value="dict.value"
        />
      </el-select>
    </div>

    <!-- 表格数据 -->
    <el-table v-loading="loading" :data="roleList">
      <el-table-column label="" prop="isPlay" width="80" align="center">
        <span class="cursor-pointer">
          <el-icon><CaretRight /></el-icon>
        </span>
      </el-table-column>
      <el-table-column label="录音文件名称" prop="roleId" width="120" />
      <el-table-column label="主叫号码" prop="roleName" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="被叫号码" prop="roleKey" :show-overflow-tooltip="true" width="150" />
      <el-table-column label="呼叫类型" prop="roleSort" width="100" />
      <el-table-column label="呼叫时间" align="center" width="100" sortable />
      <el-table-column label="通话时长" align="center" prop="createTime" sortable />
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
        <template #default="scope">
          <el-tooltip content="修改" placement="top">
            <el-button
              link
              type="primary"
              icon="Edit"
              @click="onDownloadHandle(scope.row)"
              v-hasPermi="['system:role:edit']"
            ></el-button>
          </el-tooltip>

          <el-tooltip content="查看详情" placement="top">
            <el-button
              link
              type="primary"
              icon="Grid"
              @click="onViewDetailHandle(scope.row)"
              v-hasPermi="['system:role:edit']"
            ></el-button>
          </el-tooltip>

          <el-tooltip content="删除" placement="top">
            <el-button
              link
              type="primary"
              icon="Delete"
              @click="onDeleteHandle(scope.row)"
              v-hasPermi="['system:role:remove']"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="recordingCenter">
import { Search } from "@element-plus/icons-vue"
import { delRole, listRole } from "@/api/system/role"

const router = useRouter()
const { proxy } = getCurrentInstance()
const { sys_normal_disable } = proxy.useDict("sys_normal_disable")

const roleList = ref([])
const loading = ref(true)
const total = ref(0)
const dateRange = ref([])

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    roleName: undefined,
    roleKey: undefined,
    status: undefined,
  },
  rules: {
    roleName: [{ required: true, message: "角色名称不能为空", trigger: "blur" }],
    roleKey: [{ required: true, message: "权限字符不能为空", trigger: "blur" }],
    roleSort: [{ required: true, message: "角色顺序不能为空", trigger: "blur" }],
  },
})

const { queryParams } = toRefs(data)

/** 查询角色列表 */
function getList() {
  loading.value = true
  listRole(proxy.addDateRange(queryParams.value, dateRange.value)).then((response) => {
    roleList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1
  getList()
}

/** 修改角色 */
function onDownloadHandle(row) {}

/** 查看详情按钮操作 */
function onViewDetailHandle(row) {
  router.push({
    path: "/recording-manage/detail",
    query: {
      rowId: row.roleId,
    },
  })
}

/** 删除按钮操作 */
function onDeleteHandle(row) {
  const roleIds = row.roleId || []
  proxy.$modal
    .confirm('是否确认删除角色编号为"' + roleIds + '"的数据项?')
    .then(function () {
      return delRole(roleIds)
    })
    .then(() => {
      getList()
      proxy.$modal.msgSuccess("删除成功")
    })
    .catch(() => {})
}

getList()
</script>
